require(['./config'], () => {
  require(['request', 'template', 'header', 'footer', 'zoom', 'fly', 'dropdown'], (request, template, header) => {
    class Detail {
      constructor() {
        this.init()
        this.addToCart()
      }
      init() {
        const id = window.location.search.slice(4)
        request.getDetail(id).then(resp => {
          if (resp.code === 200) {
            // const {detail} = resp.data
            const detail = { ...resp.data.detail, id }
            this.detail = detail
            // console.log(this.detail)

            $('#product_box').html(template('productTemplate', {
              ...this.detail
            }))
            this.zoom()
            this.add()
            this.sub()
            this.type()
            this.describe()
            this.province()
          }
        })
      }

      // 选择样式规格
      type() {
        $('.type').click(function () {
          $(this).parent('li').each(function () {
            // 给li添加边框样式 切换
            $(this).toggleClass("clc1").siblings().removeClass('clc1')

            if ($(this).hasClass('clc1') == false) {
              $('.chooses').removeClass('messa')
              $('.t_txt').html('')
            } else {
              $('.chooses').addClass('messa')
              $('.t_txt').html($(".clc1").children('.type').html())
            }

          })
        })

        $('.standard').click(function () {
          $(this).parent('li').each(function () {
            // 给li添加边框样式 切换
            $(this).toggleClass("clc2").siblings().removeClass('clc2')

            if ($(this).hasClass('clc2') == false) {
              $('.chooses').removeClass('messa')
              $('.s_txt').html('')
            } else {
              $('.chooses').addClass('messa')
              $('.s_txt').html($(".clc2").children('.standard').html())
            }

          })

        })
      }


      // 商品介绍、评价、规格参数、发货清单、售后保障
      describe() {
        $('.bigImgbox .destit span').on('mouseenter', function () {
          $(this).addClass('ac').siblings().removeClass('ac')
          $('.bigImgbox .descontent').eq($(this).index()).addClass('block').siblings().removeClass('block')

        })
      }


      zoom() {
        $('.zoom-image').elevateZoom({
          gallery: 'gal1'
        })
      }


      addToCart() {
        $('#product_box').on('click', '#add-shopcart', e => {

          this.fly(e)
          let cartList = localStorage.getItem('cart')
          if (cartList) {
            // 代表已经存过购物车了
            cartList = JSON.parse(cartList)
            // 判断已经存过的数据里是否有当前商品
            const isExist = cartList.some(cart => {
              return cart.id === this.detail.id
            })
            if (isExist) {
              // 代表当前商品已经存在在购物车里
              // 一般如果要修改数组里的元素，用map
              cartList = cartList.map(cart => {
                if (cart.id === this.detail.id) cart.num += Number($('.in_txt').val())
                return cart
              })
            } else {
              // 购物车里没有当前数据，就push购物车里需要存的数据
              cartList.push({
                id: this.detail.id,
                photo: this.detail.photo[0],
                tit: this.detail.tit,
                type: $('.clc1').children('.type').html(),
                standard: $('.clc2').children('.standard').html(),
                price: this.detail.price,
                // 第一次存的时候默认加入一条商品
                num: Number($('.in_txt').val()),
                // 新加入的商品默认选中
                check: true
              })
            }
            localStorage.setItem('cart', JSON.stringify(cartList))
          } else {
            //第一次存
            localStorage.setItem('cart', JSON.stringify([{
              id: this.detail.id,
              photo: this.detail.photo[0],
              tit: this.detail.tit,
              type: $('.clc1').children('.type').html(),
              standard: $('.clc2').children('.standard').html(),
              price: this.detail.price,
              num: Number($('.in_txt').val()),
              check: true
            }]))
          }


        })
      }

      fly(e) {
        $(`<img src="${this.detail.photo[0].img}" style="width: 30px; height: 30px;">`).fly({
          start: {
            left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
            top: e.clientY,  //开始位置（必填）
          },
          end: {
            left: $('.cart_all').offset().left, //结束位置（必填）
            top: $('.cart_all').offset().top - $(window).scrollTop(),  //结束位置（必填）
          },
          speed: 2.6, //越大越快，默认1.2
          vertex_Rtop: 60, //运动轨迹最高点top值，默认20
          onEnd: function () {
            this.destroy()
            // 购物车数量修改
            // console.log($('.cart_all').offset().left)
            console.log(header)
            header.calcCartNum()
          } //结束回调
        });
      }


      sub() {
        $('.sub').click(function () {
          $(this).next('input')[0].value <= 1 ? 1 : $(this).next('input')[0].value--
        })
      }


      add() {
        $('.add').click(function () {
          $(this).prev('input')[0].value++
        })
      }

      // 省
      province() {
        const _this = this
        $('.place').mouseenter(function () {
          $('.placelist').addClass('block')
          $('.close').addClass('block')

        })

        $('.close').click(function () {
          $('.placelist').removeClass('block')
          $(this).removeClass('block')
        })

        $('.pro_').click(function () {
          $(this).addClass('still').siblings().removeClass('still')
          $('#province').addClass("block").siblings('ul').removeClass('block')
          request.getProvince().then(resp => {
            var json = resp['result'][0]
            var provinceHtml = ""
            $.each(json, function (index, obj) {
              provinceHtml += `<li province-id=${obj.id}><span><a href="javascript:;">${obj.fullname}</a></span></li>`
            })
            $('#province').html(provinceHtml)
            // console.log($('#province li'))
            _this.city()
          })
        })

        $('.city_').click(function () {
          $(this).addClass('still').siblings().removeClass('still')
          $('#city').addClass("block").siblings('ul').removeClass('block')
        })

        $('.area_').click(function () {
          $(this).addClass('still').siblings().removeClass('still')
          $('#area').addClass("block").siblings('ul').removeClass('block')
        })





      }

      // 市
      city () {
        const _this = this
        $('#province li').click(function () {
          $('#city').addClass("block").siblings('ul').removeClass('block')
          $('.city_').addClass('still').siblings().removeClass('still')
          let id = $(this).attr('province-id')
          $('.pr').html($(this).children('span').children('a').html())
          console.log($(this).children('span').children('a').html())
          request.getCity(id).then(resp => {
            var json = resp['result'][0]
            var provinceHtml = ""
            $.each(json, function (index, obj) {
                provinceHtml += `<li city-id=${obj.id}><span><a href="javascript:;">${obj.fullname}</a></span></li>`
              })
              $('#city').html(provinceHtml)
              _this.area()
        })
        })
      }

      // 区
      area () {
        const _this = this
        $('#city li').click(function () {
          $('#area').addClass("block").siblings('ul').removeClass('block')
          $('.area_').addClass('still').siblings().removeClass('still')
          let id = $(this).attr('city-id')
          $('.ci').html($(this).children('span').children('a').html())
          request.getArea(id).then(resp => {
            var json = resp['result'][0]
            var provinceHtml = ""
            $.each(json, function (index, obj) {
                provinceHtml += `<li ><span><a href="javascript:;">${obj.fullname}</a></span></li>`
              })
              $('#area').html(provinceHtml)
              _this.done()
        })
        })
      }

      // 选择完成
      done () {
        $('#area li').click(function () {
          $('.ar').html($(this).children('span').children('a').html())
          $('.placelist').removeClass('block')
          $('.close').removeClass('block')
          $('.place').html($('.pr').html()+$('.ci').html()+$('.ar').html())
        })
      }



    }
    new Detail()
  })
})